<!--
 * @Descripttion: 接口调试
 * @version: 
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2021-04-13 10:51:07
 * @LastEditors: zhangfan
 * @LastEditTime: 2021-04-27 15:12:04
-->
<template>
  <div class="container">
    <topTitle
      :titleText="titleText"
      :titleTip="titleTip"
      :back="back"
      @gobackTriser="goBackList"
    ></topTitle>
    <div class="mainCon noTitleExplain">
      <el-form
        :model="formData"
        label-width="100px"
        :rules="formRules"
        ref="formData"
        class="form"
      >
        <el-row class="row-padding-bottom">
          <el-col :span="24" class="col-position">
            <el-col :span="24" class="col-position">
              <el-form-item prop="appId" label="appId:">
                <el-select
                  clearable
                  filterable
                  placeholder="请选择"
                  class="proInputWidth"
                  v-model="formData.appId"
                >
                  <el-option
                    v-for="item in visibleData"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="24" class="col-position">
            <el-form-item prop="appSecret" label="appSecret:">
              <el-input
                v-model.trim="formData.appSecret"
                placeholder="请输入"
                class="proInputWidth"
                clearable
                filterable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" class="col-position">
            <el-form-item prop="fomat" label="fomat:">
              <el-input
                v-model.trim="formData.fomat"
                placeholder="请输入"
                class="proInputWidth"
                clearable
                filterable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" class="col-position">
            <el-form-item prop="method" label="method:">
              <el-select
                clearable
                filterable
                placeholder="请选择"
                class="proInputWidth"
                v-model="formData.method"
              >
                <el-option
                  v-for="item in menuIds"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24" class="col-position">
            <el-form-item prop="nonce" label="nonce:">
              <el-input
                v-model.trim="formData.nonce"
                placeholder="请输入"
                class="proInputWidth"
                clearable
                filterable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" class="col-position">
            <el-form-item prop="timestamp" label="timestamp:">
              <el-input
                v-model.trim="formData.timestamp"
                placeholder="请输入"
                class="proInputWidth"
                clearable
                filterable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" class="col-position">
            <el-form-item prop="vison" label="vison:">
              <el-input
                v-model.trim="formData.vison"
                placeholder="请输入"
                class="proInputWidth"
                clearable
                filterable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" class="col-position">
            <el-form-item prop="data" label="data:">
              <el-input
                type="textarea"
                v-model.trim="formData.data"
                placeholder="请输入"
                class="proInputWidth"
                clearable
                filterable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" class="col-position">
            <el-form-item prop="sign" label="sign:">
              <el-input
                v-model.trim="formData.sign"
                placeholder="请输入"
                class="proInputWidth"
                clearable
                filterable
              ></el-input>
              <el-button class="commonBut saveBtn" type="primary"
                >生成签名</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="text-align: left; margin-top: 5px">
          <el-col :span="20">
            <el-form-item>
              <el-button
                class="commonBut saveBtn"
                type="primary"
                @click="saveHelp"
                :loading="isSaveLoading"
                >执行调用</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
        <el-col :span="24">
          <el-form-item label="调用结果:">
            <el-input
              type="textarea"
              v-model.trim="formData.sort"
              :rows="3"
              clearable
              filterable
            ></el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </div>
  </div>
</template>

<script>
import common from '../../kits/common'
export default {
  name: 'interfaceDebugging',
  data() {
    return {
      titleTip: '测试环境',
      titleText: '接口调试',
      back: false,
      menuIds: [],
      visibleData: [],
      editStatus: '',
      isSaveLoading: false,
      clientType: '',
      formData: {
        appId: '',
        appSecret: '',
        fomat: '',
        method: '',
        nonce: '',
        timestamp: '',
        vison: '',
        data: '',
        sign: '',
      },
      formRules: {
        appId: [
          {
            required: true,
            message: 'appId不能为空',
            trigger: 'blur',
          },
        ],
        appSecret: [
          {
            required: true,
            message: 'appSecret不能为空',
            trigger: 'blur',
          },
        ],
        fomat: [
          {
            required: true,
            message: 'fomat不能为空',
            trigger: 'blur',
          },
        ],
        method: [
          {
            required: true,
            message: 'method不能为空',
            trigger: 'blur',
          },
        ],
        nonce: [
          {
            required: true,
            message: 'nonce不能为空',
            trigger: 'blur',
          },
        ],
        timestamp: [
          {
            required: true,
            message: 'timestamp不能为空',
            trigger: 'blur',
          },
        ],
        vison: [
          {
            required: true,
            message: 'vison不能为空',
            trigger: 'blur',
          },
        ],
        data: [
          {
            required: true,
            message: 'data不能为空',
            trigger: 'blur',
          },
        ],
        sign: [
          {
            required: true,
            message: 'sign不能为空',
            trigger: 'blur',
          },
        ],
      },
      // 不同编辑器必须不同的id
      id: 'containerHelp',
      content: '',
      defaultMsg: '', //富文本编辑器初始数据
      isShowSave: '',
    }
  },
  methods: {
    goBackList() {
      this.$router.push('/home/interfacePlatform/equipmentAppid')
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/home/interfacePlatform/equipmentAppid',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    getContent() {
      this.content = this.$refs.ue.getUEContent()
    },
    saveHelp() {
      this.isSaveLoading = true
      this.$refs.formData.validate((valid) => {
        if (valid) {
          // 保存更新
          this.submitFormHelp()
        } else {
          this.isSaveLoading = false
          return false
        }
      })
    },
    submitFormHelp() {
      let url = ''
      if ('add' == this.editStatus) {
        url = 'api-m/help/add'
      } else {
        url = 'api-m/help/update'
      }
      this.formData.content = this.$refs.ue.getUEContent()
      this.axios({
        method: 'post',
        url: url,
        data: this.formData,
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.isSaveLoading = false
            this.$message({
              message: '保存成功',
              type: 'success',
            })
            // this.goBackList();
            //刷新列表
            this.$router.push('/home/help/helpTab')
            this.$store.commit('CHANGE_SLIDER_NAME', {
              oldUrl: '/home/help/helpTab',
              newUrl: this.$router.currentRoute.fullPath,
            })
          } else {
            this.$message({
              type: 'error',
              message: response.data.errorMsg,
            })
            this.isSaveLoading = false
          }
        })
        .catch((error) => {
          this.$message.error('保存失败')
          this.isSaveLoading = false
        })
    },
    getApplyPageData() {
      this.axios({
        method: 'post',
        url: 'api-m/menus/child',
      })
        .then((response) => {
          this.menuIds = response.data
        })
        .catch((response) => {})
    },
    getVisibleData() {
      this.axios({
        method: 'post',
        url: 'api-m/help/show',
      })
        .then((response) => {
          this.visibleData = response.data
        })
        .catch((response) => {})
    },
    ready() {
      // 初始化成功
    },
    input(obj) {
      // 编辑器内容有变动，具体处理自行修改
    },
    delFile(index) {
      this.upLoadFile.splice(index, 1)
    },
    // 获取子组件上传成功后的值
    getData(data) {
      this.upLoadFile.push(data)
    },
  },
}
</script>
<style scoped lang="less">
.mainCon /deep/ .ueditorBox {
  line-height: 20px;
}

.notice {
  color: #666;
  // margin-top: 40px;
  // line-height: 25px;
}

.content /deep/ #containerHelp /deep/ .edui-default .edui-editor-breadcrumb {
  display: none;
}
.upLoadDom:hover {
  cursor: pointer;
}
.mainCon {
  top: 198px;
}
.proInputWidth {
  width: 500px;
}
</style>
